<template>
	<view class="beijingse">
		<header-top :messageInfo="{typeFlag:true,message:'确认订单',liner:true}"></header-top>
		<view class="beijingtu"></view>
		<!-- 内容 -->
		<view class="shangti mainpadding">
			<template v-if="dataAll.pay_status==10 && dataAll.order_status==10">
				<view class="bigbaitext">等待买家付款</view>
				<view class="margin_top1 xiaobaitext">{{timestampToTime(dataAll.pay_endtime)}}自动关闭</view>
			</template>
			<template v-if="dataAll.order_status==20">
				<view class="bigbaitext">订单已取消</view>
				<view class="margin_top1 xiaobaitext">您的订单已关闭</view>
			</template>
			<template v-if="dataAll.order_status==30">
				<view class="bigbaitext">平台处理中</view>
				<view class="margin_top1 xiaobaitext">请您耐心等待~</view>
			</template>
			<template v-if="dataAll.order_status==40">
				<view class="bigbaitext">订单已完成</view>
				<view class="margin_top1 xiaobaitext">感谢您的支持，欢迎下次购买!</view>
			</template>
			<template v-if="dataAll.order_status==60">
				<view class="bigbaitext">平台审核中</view>
				<view class="margin_top1 xiaobaitext">请等待!</view>
			</template>
			<view class="mainpadding ffffff radius margin_top2">
				<view class="flexleft">
					<view class="dibiao margin_right2"></view>
					<view class="">
						<view class="flexleft">
							<view class="titletext margin_right3">{{dataAll.address_name}}</view>
							<view class="titletext">{{dataAll.address_mobile}}</view>
						</view>
						<view class="margin_top1 nostrongtext">{{dataAll.cityinfo}}{{dataAll.address_detail}}</view>
					</view>
				</view>
			</view>
			<view class="ffffff radius margin_top mainpadding" v-for="item in dataAll.ordergoods" :key="item.id">
				<view class="flexbetween  xiahuax">
					<view class="shilitu">
						<image :src="item.images_text" mode=""></image>
					</view>
					<view class="rtbox">
						<view class="titletext lianghang">{{item.goods_name}}</view>
						<view class="flexbetween margin_top1">
							<view class="fensetext">¥{{item.total_price}}</view>
							<view class="fensetext">x{{item.total_num}}</view>
						</view>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="strongtext">未开卡：{{item.empty_num}}</view>
					<view class="strongtext">已成功：
						<text class="lvsetext">{{item.success_num}}</text>
					</view>
					<view class="strongtext">已失败：
						<text class="honhsetext">{{item.fail_num}}</text>
					</view>
				</view>
			</view>
			<!--个人信息  -->
			<view class="mainpadding ffffff radius">
				<view class="flexbetween xiahuax">
					<view class="huisetext">姓名：</view>
					<view class="strongtext">{{dataAll.username}}</view>
				</view>
				<view class="flexbetween xiahuax margin_top">
					<view class="huisetext">身份证号：</view>
					<view class="strongtext">{{dataAll.card_no}}</view>
				</view>
				<view class="flexbetween xiahuax margin_top">
					<view class="huisetext">订单编号：</view>
					<view class="strongtext">{{dataAll.order_no}}</view>
				</view>
				<view class="flexbetween xiahuax margin_top">
					<view class="huisetext">下单时间：</view>
					<view class="strongtext">{{dataAll.createtime_text}}</view>
				</view>
				<view class="flexbetween xiahuax margin_top">
					<view class="huisetext">支付金额：</view>
					<view class="strongtext">￥{{dataAll.pay_price}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="huisetext">支付方式：</view>
					<view class="strongtext">微信支付</view>
				</view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb ffffff">
			<view class="flexright">
				<!-- 查看物流 -->
				<view class="huisebtn " v-if="dataAll.order_status==10" @click="qxorder">
					取消订单</view>
				<view class="fensebtn margin_left" v-if="dataAll.order_status==30" @click="this.popshow=true">查看物流
				</view>
				<view class="fensebtn margin_left" v-if="dataAll.order_status==40" @click="homepage">再次购买</view>
				<view class="huisebtn margin_left" v-if="dataAll.order_status==20" @click="delorder">删除订单</view>
				<view class="fensbtn margin_left" v-if="dataAll.pay_status==10 && dataAll.order_status==10"
					@click="orderPay">立即支付</view>
			</view>
		</view>
		<u-popup :show="popshow" mode="center" round="10" @close="popshow=false">
			<view class="pding">
				<view class="chebjt">
					<image src="../../static/image/system/che.png" mode=""></image>
				</view>
				<view class="wlimage">
					<image :src="dataAll.logistics_code" mode=""></image>
				</view>
				<view class="huiwezi">扫描二维码查询物流信息</view>
				<view class="flexcenter" @click="saveimage">
					<view class="flexcenter margin_top saveimage mainpadding">点击保存图片</view>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				datamsg: {
					type: "", //10未支付，20已取消，30进行中，40再次购买
					order_id: ""
				},
				popshow: false,
				dataAll: {}
			}
		},
		onLoad(options) {
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.datamsg = data
			this.init()
		},
		methods: {
			homepage() {
				uni.reLaunch({
					url: "/pages/homepage/homepage"
				})
			},
			timestampToTime(timestamp) {
				let date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let Y = date.getFullYear() + '-';
				let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				let D = date.getDate() + ' ';
				let h = date.getHours() + ':';
				let m = date.getMinutes() + ':';
				let s = date.getMinutes() + ':';
				s = date.getSeconds();
				return Y + M + D + h + m + s;
			},
			init() {
				httpRequest.request('api/order/detail', 'POST', {
					order_id: this.datamsg.order_id,
				}).then(res => {
					this.dataAll = res.data
				})
			},
			saveimage() {
				let _this = this
				uni.downloadFile({
					url: _this.dataAll.logistics_code,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									httpRequest.toast("保存成功")
								},
								fail: function() {
									httpRequest.toast("保存失败")
								}
							})
						} else {
							httpRequest.toast("保存失败")
						}
					}
				})
			},
			// 订单支付
			orderPay() {
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				httpRequest.request('api/order/orderPay', 'POST', {
					order_id: this.datamsg.order_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let pay = res.data.wxconfig
						uni.hideLoading()
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: pay.timeStamp,
							nonceStr: pay.nonceStr,
							package: pay.package,
							signType: pay.signType,
							paySign: pay.paySign,
							success: function(res) {
								// 支付成功
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							},
							fail: function(err) {
								// 支付失败
							}
						});
					} else {
						uni.hideLoading()
						httpRequest.toast(res.msg)
					}
				})
			},
			//删除订单
			delorder() {
				let _this = this;
				httpRequest.modal('提示', '确认删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/order/cancelOrder', 'POST', {
							order_id: this.datamsg.order_id,
						}).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							}
						})
					}
				})

			},
			//取消订单
			qxorder() {
				let _this = this;
				httpRequest.modal('提示', '确认取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('api/order/removeOrder', 'POST', {
							order_id: this.datamsg.order_id,
						}).then(res => {
							httpRequest.toast(res.msg);
							if (res.code == 1) {
								setTimeout(() => {
									uni.navigateBack(1)
								}, 1000)
							}
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss" scoped>
	.huiwezi {
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.chebjt {
		width: 658rpx;
		height: 237rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.margin_left {
		margin-left: 30rpx;
	}

	.pding {
		padding-bottom: 30rpx;
	}

	.saveimage {
		width: 350rpx;
		border-radius: 50rpx;
		background-color: #FE6763;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
	}

	.wlimage {
		margin: auto;
		width: 307rpx;
		height: 307rpx;

		image {
			margin: auto;
			width: 100%;
			height: 100%;
		}
	}

	.huisebtn {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		width: 170rpx;
		height: 67rpx;
		border-radius: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #666666;
	}

	.fensbtn {
		margin-left: 30rpx;
		border-radius: 120rpx;
		width: 170rpx;
		height: 67rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
		border: 1rpx solid #FD463E;
	}

	.fensebtn {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FD463E;
		width: 170rpx;
		height: 67rpx;
		border-radius: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #FD463E;
	}

	.huisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.honhsetext {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #FD463E;
	}

	.lvsetext {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #79da8b;
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.fensetext {
		font-size: 26rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FD463E;
	}

	.lianghang {
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden; //溢出内容隐藏
		text-overflow: ellipsis; //文本溢出部分用省略号表示
		display: -webkit-box; //特别显示模式
		-webkit-line-clamp: 2; //行数
		line-clamp: 2;
		-webkit-box-orient: vertical; //盒子中内容竖直排列
	}

	.rtbox {
		width: 74%;
	}

	.shilitu {
		width: 22%;
		height: 128rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.dibiao {
		width: 51rpx;
		height: 51rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/dibiao.png');
	}

	.xiaobaitext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.bigbaitext {
		font-size: 34rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.shangti {
		position: relative;
		top: -250rpx;
	}
</style>
